<!--
  Generated template for the UserInfoPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar no-border-bottom color="primary">
    <ion-buttons left>
      <button ion-button icon-only color="royal" (click)="dismiss()">
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons right>
      <button ion-button icon-only color="royal" (click)="edit()">
        <ion-icon name="create"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>
      个人中心
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content fullscreen class="bg-color">

  <div id="profile-bg" [ngStyle]="{'background-image': 'url(./assets/imgs/background/background-2.jpg)'}"></div>
  <div id="content">
    <div id="profile-info" padding>
      <img id="profile-image" [src]="userInfo.profilePicUri" (click)="uploadProfilePic()">
      <h3 id="profile-name">{{userInfo.nickName}}</h3>
      <p>用户名 &bull; {{userInfo.userCode}}</p>
      <p class="profile-description">{{userInfo.orgName}}</p>
      <!--<button ion-button *ngIf="!following" small color="purple" (click)="follow()">Follow</button>-->
      <!--<button ion-button *ngIf="following" class="follow-button" small color="purple" (click)="follow()">Following<ion-icon name="checkmark"></ion-icon></button>-->
    </div>
    <hr/>
    <p>我的动态</p>
    <!--<ion-row class="profile-numbers">-->
      <!--<ion-col col-4>-->
        <!--<p>Followers</p>-->
        <!--<span>{{user.followers}}</span>-->
      <!--</ion-col>-->
      <!--<ion-col col-4>-->
        <!--<p>Following</p>-->
        <!--<span>{{user.following}}</span>-->
      <!--</ion-col>-->
      <!--<ion-col col-4>-->
        <!--<p>Posts</p>-->
        <!--<span>{{user.posts}}</span>-->
      <!--</ion-col>-->
    <!--</ion-row>-->
    <div id="posts">
      <ion-card *ngFor="let post of posts">
        <ion-item>
          <ion-avatar item-start>
            <img [src]="userInfo.profilePicUri">
          </ion-avatar>
          <h2 class="sticky">{{userInfo.nickName}}</h2>
          <p>{{post.date}}</p>
        </ion-item>
        <img [src]="post.postImageUrl">
        <ion-card-content>
          <p>{{post.text}}</p>
        </ion-card-content>
        <ion-row>
          <ion-col col-4>
            <button ion-button color="purple" clear small icon-left>
              <ion-icon name='thumbs-up'></ion-icon>
              {{post.likes}} Likes
            </button>
          </ion-col>
          <ion-col col-5>
            <button ion-button no-padding color="purple" clear small icon-left>
              <ion-icon name='text'></ion-icon>
              {{post.comments}} Comments
            </button>
          </ion-col>
          <ion-col col-3 align-self-center text-center>
            <p>
              {{post.timestamp}}
            </p>
          </ion-col>
        </ion-row>
      </ion-card>
    </div>
  </div>
  <!--<ion-card style="width:90%;margin-left: auto;margin-right: auto">-->
    <!--<img src="{{userInfo.profilePicUri}}"/>-->
    <!--<ion-card-content text-center>-->
      <!--<ion-card-title text-center style="font-size: 1.8rem">-->
        <!--我的头像-->
      <!--</ion-card-title>-->
    <!--</ion-card-content>-->
  <!--</ion-card>-->

<!--  <ion-avatar>
    <img src={{userInfo.profilePicUri}} style="margin: auto">
  </ion-avatar>-->

<!--  <button ion-button (click)="uploadProfilePic()">上传</button>

  <ion-list class="top-list" no-lines>
    <button ion-item>
      昵称：{{userInfo.nickName}}
    </button>
    <button ion-item>
      真实姓名：{{userInfo.userName}}
    </button>
    <button ion-item>
      单位：{{userInfo.orgName}}
    </button>
    <button ion-item>
      账号：{{userInfo.userCode}}
    </button>
  </ion-list>-->

</ion-content>
